<script setup>
import {useI18n} from "vue-i18n";
import {autoHeight, toggleAnimation} from "@utils/animation.js";
import {onMounted} from "vue";
import imageLoader from "@utils/imageLoader.js";
import {PROJECT_SECTION_INFO} from "@public/config.js";
import EventBus from "@utils/EventBus.js";

const { t } = useI18n();

let projectsItem = [];

const clickEvent = (event) => {
    const { currentTarget } = event;
    setTimeout(() => {
        if (currentTarget.getBoundingClientRect().top < 0 && !import.meta.env.SSR) {
            window.scrollTo({ top: currentTarget.offsetTop - 100 });
        }
    }, 299)
    projectsItem.forEach(item => {
        if (item === currentTarget) toggleAnimation(currentTarget);
        else if (item !== currentTarget && item.dataset.toggle === 'true') toggleAnimation(item);
    })
}

const autoHeightHandler = () => {
    projectsItem.forEach(item => {
        if (item.dataset.toggle === 'true') nextTick(() => autoHeight(item));
    })
}

const projectPosition = computed(() => t('projectPosition'));
const projectResponsibility = computed(() => t('projectResponsibility'));
const projectIntroduction = computed(() => t('projectIntroduction'));
const projectLink = computed(() => t('projectLink'));

onMounted(() => {
    projectsItem = document.querySelectorAll('.projects-item');
});

EventBus.$on('language:update', autoHeightHandler)
</script>

<template>
    <div id="projects" class="projects-section section-container">
        <div class="projects-title section-title">{{ t('myProjects') }}</div>
        <div class="projects-content section-content">
            <div class="projects-item animation-fade-in-out" v-for="item in PROJECT_SECTION_INFO" :key="item.title" data-toggle="false" @click="clickEvent($event)">
                <div class="projects-item-info">
                    <div class="projects-item-title text-overflow">{{ t(item.title) }}</div>
                    <div class="projects-item-skill">
                        <svg class="project-skill-icon" :aria-hidden="true" v-for="icon in item.skills" :key="icon">
                            <use class="svg-use" :href="'#icon-' + icon"/>
                        </svg>
                    </div>
                </div>
                <div class="projects-item-content toggle-container">
                    <div class="projects-item-intro">
                        <div class="project-time">{{ t('dateStart') }} {{ item.time.start }} {{ t('dateSeparator') }}
                            {{ item.time.end === '至今' ? t('date') : item.time.end }}
                        </div>
                        <div class="project-deployed" :class="(item.deployed)">{{ t(item.deployed) }}</div>
                    </div>
                    <div class="project-job">
                        <span>{{ projectPosition }}</span>
                        <div class="project-job-item" v-for="_ in item.jobs" :key="item.title + _">{{ t(_) }}</div>
                    </div>
                    <div class="project-link" v-if="item.link">
                        <span>{{ projectLink }}</span>
                        <a :href="item.link" target="_blank" @click.stop>{{ item.link }}</a>
                    </div>
                    <div class="project-introduction">
                        <span>{{ projectIntroduction }}</span>
                        <span>{{ t(item.title + 'Introduction') }}</span>
                    </div>
                    <div class="project-responsibilities">
                        <span>{{ projectResponsibility }}</span>
                        <div v-for="index in item.responsibilityLength" :key="index">
                            {{ index }}. {{ t(item.title + 'Responsibilities' + index) }}
                        </div>
                    </div>
                    <div class="project-images" v-if="Array.isArray(item.images) && item.images.length">
                        <el-image class="project-image" :src="imageLoader(image.filename, 'project')" v-for="(image, index) in item.images" :previewSrcList="item.images.map(item => imageLoader(image.filename))" fit="contain" preview-teleported :initial-index="index" :key="image.filename" :alt="image.alt" @click.stop/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
#projects {

    .projects-content {
        color: var(--md-sys-color-on-surface-variant);

        .projects-item {
            user-select: none;
            display: flex;
            flex-direction: column;
            padding: 10px 20px;
            border: 1px solid var(--md-sys-color-outline);
            border-radius: 10px;
            margin-bottom: 20px;
            width: 100%;
            height: 46px;
            overflow: hidden;

            &-info {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            &-skill {
                display: flex;
                align-items: center;
                margin-left: 10px;

                .project-skill-icon {
                    height: 1.2em;
                    width: 1.2em;
                    margin-right: 0.5em;
                }
            }

            &-content {
                overflow: hidden;
                font-size: 14px;
                flex-shrink: 0;

                .projects-item-intro {
                    margin: 10px 0;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .project-deployed {
                        padding: 5px 10px;
                        background-color: #eeeeee;
                        border-radius: 5px;

                        &.online {
                            background: var(--md-sys-color-primary);
                            color: var(--md-sys-color-on-primary);
                        }

                        &.none {
                            background: var(--md-sys-color-secondary);
                            color: var(--md-sys-color-on-secondary);
                        }

                        &.offline {
                            background: var(--md-sys-color-tertiary);
                            color: var(--md-sys-color-on-tertiary);
                        }
                    }
                }

                .project-job, .project-link, .project-introduction, .project-responsibilities {
                    margin-bottom: 10px;

                    a {
                        text-decoration: none;
                        color: inherit;
                    }

                    span {
                        margin-right: 5px;
                    }
                }

                .project-job {
                    display: flex;

                    &-item {
                        display: flex;
                        margin-right: 8px;
                    }
                }

                .project-images {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;

                    .project-image {
                        max-width: 726px;
                        max-height: 396px;
                        padding: 10px;

                        :deep(img) {
                            max-width: 726px;
                            max-height: 396px;
                        }
                    }
                }
            }
        }
    }
}
</style>
